
<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="add">count is {{ count }}</button>
    <button type="button" @click="toOj">obj is {{ obj.name }}</button>
    {{ plusOne }}
  </div>

</template>
<script setup lang="ts">
import { ref, defineExpose, computed } from 'vue'

defineProps<{ msg: string }>()

// ref 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

// ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

// 如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

// 若要避免这种深层次的转换，请使用 shallowRef() 来替代。



let count = ref(0)

let obj = {}

const add = () => {
  count.value++
}

const plusOne = computed(() => count.value + 1)

const toOj = () => {
 count.value = { name: 111 }
 setTimeout(() => {
  count.value.name = 'www'
 }, 1000)
}
defineExpose({ count })
</script>

<style scoped>

</style>
